<template>
  <div
    :class="[
      'fei-progress',
      status ? 'progress-' + status : '',
      {
        'fei-progress-text': !showText,
        'fei-progress-text-inside': textInside
      }
    ]"
    role="progressbar"
    :aria-valuenow="percentValue"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <div class="fei-progress-bar" :class="{ 'is-active': active }">
      <div class="fei-progress-bar__outer" :style="barOutStyle">
        <div class="fei-progress-bar__inner" :style="barStyle">
          <div v-if="showText && textInside" class="fei-progress-bar__innerText">
            {{ percentValue }}%
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="showText && !textInside"
      class="fei-progress__text"
      :style="{ fontSize: progressTextSize + 'px' }"
    >
      <template v-if="!status">{{ percentValue }}%</template>
      <template v-else>
        <slot v-if="status === 'text'"></slot>
        <f-icon v-else :name="iconClass"></f-icon>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import '../styles/index.css'
import FIcon from '../../icon/src/Icon.vue'
import type { ProgressProps } from './types'
import { computed } from 'vue'

defineOptions({
  name: 'FProgress'
})

const props = withDefaults(defineProps<ProgressProps>(), {
  percent: 0,
  strokeWidth: 8,
  showText: true
})

const percentValue = computed(() => Math.max(0, Math.min(100, props.percent)))

const barOutStyle = computed(() => ({
  height: props.strokeWidth + 'px',
  borderRadius: props.radius,
  backgroundColor: props.bgColor
}))

const barStyle = computed(() => ({
  width: percentValue.value + '%',
  backgroundColor: props.color,
  borderRadius: props.radius
}))

const iconClass = computed(() => (props.status === 'success' ? 'check-circle' : 'close-circle'))

const progressTextSize = computed(() => {
  let size = 12 + props.strokeWidth * 0.4
  return size > 16 ? 16 : size
})
</script>
